<template>
	<!-- 已经绑定的学生 -->
	<view class="page">
		<!-- search -->
		<view style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<view class="" @click="popBack()">
				<text class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></text>
				<text style="font-size: 16px;">返回</text>
			</view>
		</view>
		<!-- base info -->
		<div style="padding: 12px;background-color: #FFFFFF;">
			<!-- row -->
			<div style="display: flex;">
				<image :src="require('../../static/home/home01.png')" style="width: 44px;height: 44px;" mode=""></image>
				<div style="flex: 1;padding-left: 10px;">
					<div style="display: flex;justify-content: space-between;align-items: auto;">
						<div style="font-size: 14px;font-weight: bold;">哈哈(州级了)</div>
						<div
							style="padding: 5px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 15px;">
							意向强烈</div>
					</div>
					<div style="display: flex;">
						<div
							style="padding: 2px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;margin-right: 5px;">
							已绑定</div>
						<div
							style="padding: 2px 12px;background-color: #FFFFFF;color: #FF0000;font-size: 12px;border-radius: 15px;border: 1px solid #FF0000;margin-right: 5px;">
							校园大使</div>
						<div style="padding: 2px 12px;color: #007AFF;font-size: 12px;border-radius: 15px;">男</div>
					</div>
				</div>
			</div>
			<!-- row2 -->
			<div style="display: flex;margin-top: 12px;">
				<div
					style="padding: 2px 12px;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					修改</div>
				<div @click="loadAddFlowPage"
					style="padding: 2px 12px;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					填写跟进记录</div>
				<div @click="loadCheckOrder"
					style="padding: 2px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					签单</div>
			</div>

			<!-- row3 -->
			<div style="display: flex;margin-top: 12px;justify-content: space-between;">
				<div style="font-size:12px;color:#999999;">上次跟进时间:2020年12月12日</div>
				<div style="font-size:12px;color:#999999;">距离下次</div>
			</div>
		</div>
		<!-- 课程意向 & 基本资料 & tab-->
		<div style="flex: 1;display: flex;justify-content: center;align-items: center;" v-if="!canview">
			<div style="font-size: 14px;font-weight: bold;">无权限查看该学生信息</div>
		</div>
		<div style="flex: 1;overflow-y: auto;display: flex;flex-direction: column;padding: 5px 12px;background-color: #FFFFFF;"
			v-if="canview">
			<div>
				<!-- item -->
				<div style="background-color: #FFFFFF;display: flex;color: #007AFF;align-items: center;">
					<div style="font-size: 14px;margin-right: 5px;">报名课程</div>
					<div class="iconfont icon-arrow-down"></div>
				</div>

				<!-- item or goods for order -->
				<div style="padding: 12px;border: 1px solid #999999;margin-top: 5px;" v-for="(ls,i) in 2">
					<!-- titile -->
					<div
						style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #999999;padding-bottom: 12px;">
						<div style="font-size: 12px;font-weight: bold;">四川大学什么什么的项目</div>
						<div style="background-color: #FFFFFF;color: #FF0000;display: flex;align-items: center;">
							<div style="font-size: 12px;">已报名</div>
							<div class="iconfont icon-arrow-down" style="font-size: 14px;margin-top: 3px;"></div>
						</div>
					</div>
					<!-- lesson -->
					<div v-for="(cls,index) in 2">
						<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 5px;">
							<div style="font-size: 12px;font-weight: bold;color: #007AFF;">英国文学概论</div>
							<div style="font-size: 12px;color: #999999;">开课：2021-10-12 13:39:59</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 5px;" v-for="(item,idx) in 3">
							<div style="display: flex;flex: 1;">
								<text style="font-size: 12px;color: #999999;">课程认证:</text>
								<text style="font-size: 12px;color: #999999;margin-left: 12px;">认证中</text>
							</div>
							<div style="display: flex;align-items: center;color:#007AFF;">
								<text style="font-size: 12px;">更改状态</text>
								<text class="iconfont icon-arrow-right" style="font-size: 12px;"></text>
							</div>
						</div>
					</div>
					<!-- btns & mark -->
					<div style="display: flex;margin-top: 12px;justify-content: flex-end;">
						<div
							style="padding: 3px 12px;font-size: 12px;color: #999999;border: 1px solid #999999;border-radius: 4px;margin-right: 12px;">
							更改课程</div>
						<div
							style="padding: 3px 12px;font-size: 12px;color: #999999;border: 1px solid #999999;border-radius: 4px;margin-right: 12px;">
							退款</div>
						<div
							style="padding: 3px 12px;font-size: 12px;color: #999999;border: 1px solid #999999;border-radius: 4px;">
							收款记录</div>
					</div>
				</div>
			</div>


			<!-- 定金 -->
			<div style="margin-top: 12px;border: 1px solid #999999;padding: 6px 12px;">
				<div style="display: flex;align-items: center;justify-content: space-between;">
					<div style="font-size: 12px;font-weight: bold;">定金</div>
					<div style="background-color: #FFFFFF;color: #00aa00;display: flex;align-items: center;">
						<div style="font-size: 12px;font-weight: bold;">已使用</div>
						<div class="iconfont icon-arrow-down" style="font-size: 14px;margin-top: 3px;"></div>
					</div>
				</div>
				<div style="padding: 6px 0;display: flex;">
					<image :src="require('../../static/home/home01.png')" mode="" style="width: 44px;height: 44px;">
					</image>
					<div style="flex: 1;padding-left: 12px;">
						<div>
							<text style="font-size: 12px;color: #333333;">订单总价:</text>
							<text style="font-size: 12px;color: #FF0000;margin-left: 5px;">￥123.00</text>
						</div>
						<div>
							<text style="font-size: 12px;color: #333333;">提交订单时间:</text>
							<text style="font-size: 12px;color: #333333;margin-left: 5px;">2021-10-12 14:51:13</text>
						</div>
					</div>
				</div>
			</div>

			<expand-data-cell title="意向课程" />

			<!-- tabbar -->
			<div>
				<div
					style="padding: 0 12px;display: flex;	white-space: nowrap;overflow: hidden;background-color: #FFFFFF;">
					<view @click="tabClick(idx)" style="color: #333333;padding: 5px 0;text-align: center;flex: 1;"
						v-for="(obj,idx) in tabs" :key="idx">
						<text :style="{'font-size': '14px',
					'font-weight': idx == tabindex?'bold':'normal',
					'color':idx == tabindex?'#007AFF':'#222222'}">{{obj}}</text>
						<view style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex">
						</view>
					</view>
				</div>
			</div>

			<!-- body -->
			<div>
				<detailinfo v-if="tabindex == 0" />
				<chatrecourd v-if="tabindex == 1" />
				<!-- 学籍信息 -->
				<div v-if="tabindex == 2" style="padding: 12px;border: 1px solid #999999;margin-top: 5px;"
					v-for="(item,idx) in schools">
					<!-- row -->
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<text style="font-size: 12px;color: #007AFF;font-weight: bold;">学校: 四川大学</text>
						<text @click="changeSchoolInfoBtnClick(item)"
							style="font-size: 12px;color: #007AFF;padding: 3px 12px;border: 1px solid #007AFF;border-radius: 4px;">修改</text>
					</div>
					<!-- item -->
					<form-key-value-row :keystr="k" :valuestr="item[k]" v-for="(k,index) in Object.keys(item)">
					</form-key-value-row>
				</div>
			</div>
		</div>

		<!-- 更改学籍信息 弹窗 -->
		<div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;
			padding: 0 12px;
		background-color: #00000050;display: flex;flex-direction: column;justify-content: center;" v-if="showChangeSchool">
			<div style="padding: 12px;background-color: #FFFFFF;">
				<!-- title -->
				<div style="display: flex;justify-content: space-between;align-items: center;">
					<text style="font-size: 14px;font-weight: bold;">更改学籍信息</text>
					<text @click="showChangeSchool=false" style="font-size: 14px;">关闭</text>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">学校:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入学校名称"></input>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">ID:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入ID"></input>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">学生学号:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入学生学号"></input>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">邮箱地址:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入邮箱地址"></input>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">UserName:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入UserName"></input>
				</div>
				<!-- row -->
				<div style="display: flex;align-items: center;margin-top: 10px;">
					<text
						style="font-size: 14px;font-weight: bold;margin-right: 5px;color: #666666;min-width:80px;">初始密码:</text>
					<input style="font-size: 13px;flex: 1;border: 1px solid #999999;padding-left: 5px;height: 30px;"
						placeholder="请输入初始密码"></input>
				</div>
				<!-- done -->
				<div style="display: flex;margin-top: 10px;flex-direction: column;">
					<div @click="showChangeSchool=false"
						style="padding: 10px 12px;background-color: #007AFF;color: #FFFFFF;text-align: center;border-radius: 4px;font-size: 14px;">
						保存</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import detailinfo from "./personinfo-hasbindbusiness-detailinfo"
	import chatrecourd from "./personinfo-hasbindbusiness-chatrecourd"
	export default {
		components: {
			detailinfo,
			chatrecourd
		},
		data() {
			return {
				canview: true,
				tabindex: 0,
				showChangeSchool: false, //修改学籍信息
				tabs: ['详细资料', '沟通记录', '学籍信息'],
				schools: [{
					"id": "123123",
					"学生学号": "15236192",
					"邮箱": "sugede@qq.com",
					"username": "kkk",
					"初始密码": "qwe123123"
				}, {
					"id": "123123",
					"学生学号": "15236192",
					"邮箱": "sugede@qq.com",
					"username": "kkk",
					"初始密码": "qwe123123"
				}]
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			},
			popBack() {
				uni.navigateBack({

				})
			},
			changeSchoolInfoBtnClick(data) {

				this.showChangeSchool = true;
			},
			loadAddFlowPage() {
				uni.navigateTo({
					url: "/pages/personinfo/personinfo-add-flowup"
				})
			},
			loadCheckOrder() {
				uni.navigateTo({
					url: "/pages/personinfo/personinfo-checkorder"
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		flex: 1;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
	}
</style>
